<template>
    <div class="w-100 h-100">
      <div style="width: 100; height: 10%" class="d-flex justify-content-end">
        <FakeLegend
        style="margin: auto 30px auto 0px"
          :color="colorSingleList"
          :text="['规划建设面积', '已完成建设面积',]"
        >
        </FakeLegend>
      </div>
      <div class="bottom">
        <div id="zhi2" style="width: 100%; height: 100%"></div>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import * as echarts from "echarts";
  import { useOptions } from "@/hook/useOptions";
import { useFunc } from "@/hook/useFunc";
  
  const colorSingleList = [
    "rgba(3, 230, 254, 1)",
    "rgba(184, 235, 143, 1)",
  
  ];

  
  const value = useOptions().nowYear();
  const options = [
    {
      value: "2023",
      label: "2023",
    },
  
  ];
  const echartsData = ref();

const offsetX = 10;
const offsetY = 5;
// 绘制左侧面
const CubeLeft = echarts.graphic.extendShape({
   shape: {
      x: 0,
      y: 0,
   },
   buildPath: function (ctx:any, shape) {
      // 会canvas的应该都能看得懂，shape是从custom传入的
      const xAxisPoint = shape.xAxisPoint;
      const c0 = [shape.x, shape.y];
      const c1 = [shape.x - offsetX, shape.y - offsetY];
      const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
      const c3 = [xAxisPoint[0], xAxisPoint[1]];
      ctx
         .moveTo(c0[0], c0[1])
         .lineTo(c1[0], c1[1])
         .lineTo(c2[0], c2[1])
         .lineTo(c3[0], c3[1])
         .closePath();
   },
});

// 绘制右侧面
const CubeRight = echarts.graphic.extendShape({
   shape: {
      x: 0,
      y: 0,
   },
   buildPath: function (ctx:any, shape) {
      const xAxisPoint = shape.xAxisPoint;
      const c1 = [shape.x, shape.y];
      const c2 = [xAxisPoint[0], xAxisPoint[1]];
      const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
      const c4 = [shape.x + offsetX, shape.y - offsetY];
      ctx
         .moveTo(c1[0], c1[1])
         .lineTo(c2[0], c2[1])
         .lineTo(c3[0], c3[1])
         .lineTo(c4[0], c4[1])
         .closePath();
   },
});

// 绘制顶面
const CubeTop = echarts.graphic.extendShape({
   shape: {
      x: 0,
      y: 0,
   },
   buildPath: function (ctx:any, shape) {
      const c1 = [shape.x, shape.y];
      const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点
      const c3 = [shape.x, shape.y - offsetX];
      const c4 = [shape.x - offsetX, shape.y - offsetY];
      ctx
         .moveTo(c1[0], c1[1])
         .lineTo(c2[0], c2[1])
         .lineTo(c3[0], c3[1])
         .lineTo(c4[0], c4[1])
         .closePath();
   },
});

// 注册三个面图形
echarts.graphic.registerShape("CubeLeft", CubeLeft);
echarts.graphic.registerShape("CubeRight", CubeRight);
echarts.graphic.registerShape("CubeTop", CubeTop);
let xaxisData:any 
let yaxisData :any 
let yaxisData2 :any 
const props = defineProps({
  echartsData: {
    type: Array,
    default: () => [],
  },
});
onBeforeMount(()=>{
echartsData.value=[
    {
        label:'附属绿地雨水花园',
        value:[]
    }
]
 xaxisData = ['附属绿地雨水花园', '城市道路雨水花园', '雨水塘', '植草沟', '雨水湿地']
//  yaxisData = [90, 80, 100, 70, 65]
//  yaxisData2 = [ 100, 70, 65, 69, 80]
})
  onMounted(() => {
   yaxisData=props.echartsData[0]
   yaxisData2=props.echartsData[1]
    let option = {
   background: 'trasparent',
   tooltip: {
    show:true,
      trigger: "axis",
      // axisPointer: {
      //    type: "shadow",
      // },
      backgroundColor: "rgba(28,64,81,0.7)",
      borderColor: "transparent",
      textStyle: {
         fontSize: 20,
         color: "#fff",
      },
      formatter: (params:any, ticket:any, callback:any) => {
         const item = params[1];
         const item1 = params[0];
         return '<span style="display: inline-block; width: 10px; height: 10px; background-color: rgb(3, 230, 254); border-radius: 50%;"></span> 地下蓄水池: ' 
               + item.value + ' 个<br>'
               + '<span style="display: inline-block; width: 10px; height: 10px; background-color: rgb(184, 235, 143); border-radius: 50%;"></span> 塑膜蓄水模块: ' 
               + item1.value + ' 个';
      },
   },
   grid: {
      left: "1%",
      right: "0%",
      top: "16%",
      bottom: "5%",
      containLabel: true,
   },
   xAxis: {
      type: 'category',
      data: xaxisData,
      axisLine: {
         show: true,
         lineStyle: {
            width: 1,
            color: '#667A8E'
         }
      },
      axisTick: {
         show: false
      },
      axisLabel: {
            interval: 0, // 显示所有标签
            formatter: function (value:any) {
                // 将每个标签中的文本按每四个字符进行分割并加上换行符
                return value.match(/.{1,4}/g).join('\n');
            },
            // 调整标签样式，确保换行显示不会导致标签相互重叠
            textStyle: {
              fontSize: 20,
              color: "#667A8E",
            }
        }
   },
   yAxis: {
      type: 'value',
      nameTextStyle: {
         color: '#fff',
         fontWeight: 400,
         fontSize: 14
      },
      axisLine: {
         show: false,
         lineStyle: {
            width: 1,
            color: '#667A8E'
         }
      },
      splitLine: { // 配置分割线
            show: true,
            lineStyle: {
                color: 'rgba(92, 225, 255, 0.5)', // 蓝色分割线
                type: 'solid' // 实线
            }
        },
      axisTick: {
         show: false
      },
      axisLabel: {
         fontSize: 20,
         color: '#667A8E',
         formatter: "{value}" + '㎡',
      }
   },
   series: [
      {
         type: "custom",
         renderItem: (params:any, api:any) => {
            const location = api.coord([api.value(0), api.value(1)]);
            const xAxisPoint = api.coord([api.value(0), 0]);
            const distance = 30;
            return {
               type: "group",
               children: [
                  {
                     type: "CubeLeft",
                     shape: {
                        api,
                        xValue: api.value(0),
                        yValue: api.value(1),
                        x: location[0] - distance,
                        y: location[1],
                        xAxisPoint: [xAxisPoint[0] - distance, xAxisPoint[1]],
                     },
                     style: {
                        fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                           {
                              offset: 0,
                              color: '#5CE1FF',
                           },
                           {
                              offset: 0.35,
                              color: '#088BFF'
                           },
                           {
                              offset: 1,
                              color: 'transparent'
                           }
                        ]),
                     },
                  },
                  {
                     type: "CubeRight",
                     shape: {
                        api,
                        xValue: api.value(0),
                        yValue: api.value(1),
                        x: location[0] - distance,
                        y: location[1],
                        xAxisPoint: [xAxisPoint[0] - distance, xAxisPoint[1]],
                     },
                     style: {
                        fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                           {
                              offset: 0,
                              color: '#5CE1FF',
                           },
                           {
                              offset: 0.35,
                              color: '#088BFF'
                           },
                           {
                              offset: 1,
                              color: 'transparent'
                           }
                        ]),
                     },
                  },
                  {
                     type: "CubeTop",
                     shape: {
                        api,
                        xValue: api.value(0),
                        yValue: api.value(1),
                        x: location[0] - distance,
                        y: location[1],
                        xAxisPoint: [xAxisPoint[0] - distance, xAxisPoint[1]],
                     },
                     style: {
                        fill: '#5CE1FF'
                     },
                  },
               ],
            };
         },
         data: yaxisData2,
      },
      {
         type: "custom",
         renderItem: (params:any, api:any) => {
            const location = api.coord([api.value(0), api.value(1)]);
            return {
               type: "group",
               children: [
                  {
                     type: "CubeLeft",
                     shape: {
                        api,
                        xValue: api.value(0),
                        yValue: api.value(1),
                        x: location[0],
                        y: location[1],
                        xAxisPoint: api.coord([api.value(0), 0]),
                     },
                     style: {
                        fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                           {
                              offset: 0,
                              color: '#B8EB8F',
                           },
                           {
                              offset: 0.35,
                              color: '#B8EB8F'
                           },
                           {
                              offset: 1,
                              color: 'transparent'
                           }
                        ]),
                     },
                  },
                  {
                     type: "CubeRight",
                     shape: {
                        api,
                        xValue: api.value(0),
                        yValue: api.value(1),
                        x: location[0],
                        y: location[1],
                        xAxisPoint: api.coord([api.value(0), 0]),
                     },
                     style: {
                        fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                           {
                              offset: 0,
                              color: '#B8EB8F',
                           },
                           {
                              offset: 0.35,
                              color: '#B8EB8F'
                           },
                           {
                              offset: 1,
                              color: 'transparent'
                           }
                        ]),
                     },
                  },
                  {
                     type: "CubeTop",
                     shape: {
                        api,
                        xValue: api.value(0),
                        yValue: api.value(1),
                        x: location[0],
                        y: location[1],
                        xAxisPoint: api.coord([api.value(0), 0]),
                     },
                     style: {
                        fill: '#B8EB8F'
                     },
                  },
               ],
            };
         },
         data: yaxisData,
      },
      {
         type: "bar",
         itemStyle: {
            color: "transparent",
         },
         data: yaxisData,
      },
   ],
};
    let myChart1 = echarts.init(document.getElementById("zhi2") as HTMLElement);
   // useFunc().setDefaultOption(myChart1)

    myChart1.setOption(option);
  });
  </script>
  
  <style lang="less" scoped>
  
  .bottom {
    width: 100%;
    height: 84%;
    display: flex;
  }
  </style>
  